<template>
    <div class="exchangeTicket">
        <x-header title="代金券兑换" :left-options="{backText:''}" class="whiteHeader"></x-header>
        <div class="exchangeTicketInfo">
            <div class="exchangeTicketInfoBlank"></div> 
            <div class="exchangeTicketSubject">
                <p>代金券兑换</p>
            </div>
            <div class="exchangeTicketBtn1">
                <input id="exchangeC" type="text" placeholder="请输入兑换码" v-model="exchangeCode"/>
            </div>
            <div class="exchangeTicketBtn2">
                <button @click="ensure">确认兑换</button>
            </div>
            <div class="exchangeTicketHelp">
                <img src="../../assets/image/ticket/exchangeTitle.jpg" alt="" />
                <p>1.输入代金券兑换码,点击"确认兑换",立即获取优惠券;</p>
                <p>2.兑换成功后,优惠券将直接放入您的账户中,您可以在"我的"-"我的券包"中查看</p>
                <p>3.兑换码如果已过期/已兑换,将无法再次兑换。</p>
            </div>
        </div>
        <!--代金券兑换弹窗背景-->
        <div class="exchangeTicketBg" v-show="showBg" @click="exchangeBg"></div>
        <!--代金券兑换成功弹窗-->
        <div class="exchangeTicketT" v-if="show1">
            <div class="exchangeTicketT_1">
                <img src="../../assets/image/ticket/exchangeSuccess.png" alt="" />
            </div>
            <div class="exchangeTicketT_2">
                <img src="../../assets/image/ticket/exchangeTrue.png" alt="" />
            </div>
            <!--<p>获取一张&thinsp;<span>{{allData.AMOUNT}}</span>&thinsp;元的{{allData.CASHNAME}}</p>-->
            <p>获取一张&thinsp;{{allData.CASHSUBJECT}}</p>
            <div class="exchangeTicketT_bottom">
                <p @click="continueExchange">继续兑换</p>
                <p @click="goLook">去看看</p>
            </div>
        </div>
        <!--代金券兑换失败弹窗-->
        <div class="exchangeTicketF" v-if="show2">
            <div class="exchangeTicketF_1">
                <img src="../../assets/image/ticket/exchangeFail.png" alt="" />
            </div>
            <div class="exchangeTicketF_2">
                <img src="../../assets/image/ticket/exchangeFalse.png" alt="" />
            </div>
            <p>兑换码已使用或已过期</p>
            <div class="exchangeTicketF_bottom">
                <p @click="continueExchange">继续兑换</p>
                <p @click="goLook">去看看</p>
            </div>
        </div>                
    </div>
</template>
<script>
    /*兑换代金券*/
    import { XHeader,Alert } from 'vux';
    import { setCookie, getCookie } from '../../util/commonUtils';
    export default {
        name: "exchangeTicket",
        // 数据
        data() {

            return {
                userId: '',
                phone:'',
                exchangeCode:'',//兑换码                
                showBg: false, //是否显示弹窗背景颜色
                show1: false, //兑换成功弹窗                
                show2: false, //兑换失败弹窗                
                allData:'',//代金券兑换数据
            }
        },
        // 计算属性
        computed: {

        },
        // 创建（实例创建完成）
        created() {            
            this.userId = getCookie('loginkey');  
            this.phone = getCookie('userName');
            
        },
        // el被创建，并挂载到实例上
        mounted() {

        },
        // 方法（实例中的方法）-----------
        methods: {
            //确认兑换
            ensure() {
                if(this.exchangeCode==null || this.exchangeCode==''){
                    this.$vux.alert.show({title:'提示',content:'请输入兑换码'});return;
                }
                //优惠劵兑换
                this.$fetchPost('/CashCouponWeb/couponExchange.action', {
                    PHONE: this.phone,
                    CODE:this.exchangeCode
                }).then(
                        res => {
                            if(res.STATUS_CODE==1){
                                this.allData=res;
                                this.showBg = true;
                                this.show1 = true;
                                this.show2 = false;
                            }else if(res.STATUS_CODE==3){//兑换码已领取或已过期
                                this.showBg = true;
                                this.show1 = false;
                                this.show2 = true;
                            }else if(res.STATUS_CODE==5){//兑换码输入有误
                                this.showBg = true;
                                this.show1 = false;
                                this.show2 = true;
                            }else if(res.STATUS_CODE==15){//缺少参数
                                this.$vux.alert.show({title:'提示',content:'缺少参数!'});return;
                            }else{//服务器内部错误
                                this.$vux.alert.show({title:'提示',content:'服务器内部错误!'});return;
                            }
                        }, err => console.log(err)
                );                
            },
            //关闭背景
            exchangeBg() {
                this.showBg = false;
                this.show1 = false;
                this.show2 = false;
            },
            //继续兑换
            continueExchange(){
                let inp = document.getElementById('exchangeC');
                this.showBg = false;
                this.show1 = false;
                this.show2 = false;
                this.exchangeCode = '';
                inp.focus();
            },
            //去看看
            goLook(){
                this.$router.push('/ticket');
            },
        },
        // 子组件
        components: {
            XHeader,
            Alert
        }
    }
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
    @import url('../../assets/css/public.less');
    .exchangeTicket { 
        height: 100%;
        .exchangeTicketInfo{
            position: absolute;
            top: 0;
            width:7.5rem;
            min-height:12rem;
            height: 100%;
            padding-top: 0.88rem;
            background:#dd022d url('../../assets/image/ticket/exchange.png') no-repeat center center;
            background-size:7.5rem 12rem;
            .exchangeTicketInfoBlank{
                height:5.1rem;
            }
            .exchangeTicketSubject{
                p{
                    font-size:.42rem;
                    color:#fff;
                }
            }
            .exchangeTicketBtn1{
                input{
                    width:6.6rem;
                    height:.88rem;
                    line-height:.88rem;
                    font-size:.34rem;
                    color:#fff;
                    text-align:center;
                    border-radius:.44rem;                    
                    background:#dd022d;
                    border:0;
                    outline:none;
                    border:.01rem solid #fff;                    
                }
                input::placeholder{
                    text-align:center;
                    font-size:.34rem;
                    color:#fff;
                }
                input:focus{
                    text-align:center;
                }
            }
            .exchangeTicketBtn2{
                button{
                    width:6.6rem;
                    height:.88rem;
                    line-height:.88rem;
                    font-size:.32rem;
                    color:#DD022D;
                    text-align:center;
                    border-radius:.44rem;                    
                    background:#FDDE70;
                    border:0;
                    outline:none;
                    border:.01rem solid #fff;                    
                }
            }
        }
        .exchangeTicketHelp{
            img{
                width:6.28rem;
                height:.39rem;
            }
            p{
                width:90%;
                margin:0 auto .15rem;
                font-size:.26rem;
                color:#fff;
                text-align:left;
            }
        }
        .exchangeTicketBg{
            position:fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background:rgba(0,0,0,0.5);
            z-index:9998;
        }
        .exchangeTicketT{
            width:5.7rem;
            height:6.2rem;
            border-radius:.33rem;
            background:#fff;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            overflow:hidden;
            z-index:9999;
            .exchangeTicketT_1{
                img{
                    width:4.11rem;
                    height:.51rem;
                }
            }
            .exchangeTicketT_2{                
                height:3.2rem;
                img{
                    width:3.08rem;
                    height:3.2rem;
                }
            }
            p{
                font-size:.3rem;
                color:#000;
                span{
                    color:#ec2121;
                }
            }
            .exchangeTicketT_bottom{  
                margin-top:.2rem;
                .borderTFu(#ccc);
                p{
                    display:table-cell;
                    width:3.75rem;
                    height:1rem;     
                    vertical-align:middle;                    
                    font-size:.32rem;
                    color:#007AFF;                                       
                }
                p:nth-child(1){                    
                    .borderRFu(#ccc);    
                }
            }
        }
        .exchangeTicketF{
            width:5.7rem;
            height:6.2rem;
            border-radius:.33rem;
            background:#fff;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            overflow:hidden;
            z-index:9999;
            .exchangeTicketF_1{
                img{
                    width:4.6rem;
                    height:.51rem;
                }
            }
            .exchangeTicketF_2{                
                height:3.2rem;
                img{
                    width:2.84rem;
                    height:3.2rem;
                }
            }
            p{
                font-size:.3rem;
                color:#000;
                span{
                    color:#ec2121;
                }
            }
            .exchangeTicketF_bottom{  
                margin-top:.2rem;
                .borderTFu(#ccc);
                p{
                    display:table-cell;
                    width:3.75rem;
                    height:1rem;     
                    vertical-align:middle;                    
                    font-size:.32rem;
                    color:#007AFF;                                       
                }
                p:nth-child(1){                    
                    .borderRFu(#ccc);    
                }
            }
        }
    }
</style>
